
import {lazy } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import {Loading} from '@/component/Loading'
// 首页
const Home = lazy(() => import("@/pages/home/Home"))
// 登录
const Login = lazy(() => import("@/pages/login/Login"))
// 注册
const Register = lazy(() => import("@/pages/register/Register"))
// 个人中心
const Personal = lazy(() => import("@/pages/personal/Personal"))
// 首页
const Main = lazy(() => import("@/pages/main/Main"))
// 查询商品页面
const Product = lazy(() => import("@/pages/product/Product"))
// 商品详情页面
const ProductInfo = lazy(() => import("@/pages/productInfo/ProductInfo"))
// 购物车
const Shopping = lazy(() => import("@/pages/shopping/Shopping"))
// 结算页面
const Settle = lazy(() => import("@/pages/settle/Settle"))
// 收货地址
const ShippingAddress = lazy(() => import("@/pages/shippingAddress/ShippingAddress"))
// 个人交易信息
const PersonalDeal = lazy(() => import("@/pages/personalDeal/PersonalDeal"))
// 个人资料
const PersonalData = lazy(() => import("@/pages/personalData/PersonalData"))
// 订单页面
const Order = lazy(() => import("@/pages/order/Order"))
// 已收货
const Received = lazy(() => import("@/pages/received/Received"))
//  促销活动
const Dis = lazy(() => import("@/pages/dis/Dis"))

type routes = {
  path: string,
  Component: JSX.Element,
  children?: routes[],
}

const route: routes[] = [
  {
    path: '/',
    Component: <Navigate to={"/home/main"}/>  ,
  },
  {
    path: '/home',
    Component: <Home/>,
    children: [
      {
        path: "main",
        Component: <Main/>
      },
      {
        path: "product/:id",
        Component: <Product/>
      },
      {
        path: "productinfo/:id",
        Component: <ProductInfo/>
      },
      {
        path: "dis",
        Component: <Dis />
      },
      {
        path: "shopping",
        Component: <Shopping/>
      },
      {
        path: 'settle',
        Component: <Settle/>
      },
      {
        path: 'order/:id',
        Component: <Order/>
      }
    ]
  },
  {
    path: '/login',
    Component: <Login/>
  },
  {
    path: '/register',
    Component: <Register/>
  },
  {
    path: '/personal',
    Component: <Personal/>,
    children: [
      {
        path: 'personalData',
        Component: <PersonalData/>
      },
      {
        path: 'personalDeal',
        Component: <PersonalDeal/>
      },
      {
        path: 'shippingAddress',
        Component: <ShippingAddress/>
      },
      {
        path: 'received',
        Component: <Received/>
      },
    ]
  },

]




function App() {
  const router = (route) => {
    return route.map((item, index) => {
      if (item.children?.length) {
        return <Route
          path={item.path}
          key={item.path + index}
          element={
            <Loading Component={item.Component}/>
          }
        >
          { router(item.children)}
        </Route>
      }
      return <Route
        path={item.path}
        key={item.path + index}
        element={<Loading Component={item.Component}/>}
      />
    })
  }

  return (
    <Routes >
      {router(route)}
    </Routes>
  )
}

export default App
